<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>横向时间轴</title>
    <link rel="stylesheet" href="../scripts/plugins/time_shaft/time_shaft.css">
</head>

<body>
<div style="position: relative;margin: 0 auto;padding: 50px;">
    <div class="time_shaft_container">
        <ul>
            <li class="point area">
                <div>
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#iconditu"></use>
                    </svg>
                </div>
                <span class="text">顺乐市区</span>
            </li>
            <li class="point">
            <span class="point"></span>
            <span class="text">上海</span>
            </li>
            <li class="line dashed">
                <div>
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#iconhuoche"></use>
                    </svg>
                    <span>拖</span>
                </div>
                <div></div>
            </li>
            <li class="point">
                <span class="point"></span>
                <span class="text">顺乐</span>
            </li>
            <li class="line dashed">
                <div>
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#iconhuoche"></use>
                    </svg>
                    <span>拖</span>
                </div>
                <div></div>
            </li>
            <li class="point sea">
                <span class="point"></span>
                <span class="text">虎门</span>
                <span class="text">
                    <span class="color_47b3ff">预靠&nbsp;</span>
                    <span>2020-05-08 19:00</span>
                </span>
                <span class="text">
                    <span class="color_47b3ff">预离&nbsp;</span>
                    <span>2020-05-08 19:00</span>
                </span>
            </li>
            <li class="line sea">
                <div>
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#iconchuanbo"></use>
                    </svg>
                    <span>海</span>
                </div>
                <div><span class="title">华旭达27 10023</span></div>
            </li>
            <li class="point sea">
                <span class="point"></span>
                <span class="text">上海</span>
                <span class="text">
                    <span class="color_47b3ff">预抵&nbsp;</span>
                    <span>2020-05-08 19:00</span>
                </span>
            </li>
            <li class="line">
                <div>
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#iconchuanbozhizao"></use>
                    </svg>
                    <span>驳</span>
                </div>
                <div></div>
            </li>
            <li class="point">
                <span class="point"></span>
                <span class="text">武汉</span>
            </li>
            <li class="line">
                <div>
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#iconchuanbozhizao"></use>
                    </svg>
                    <span>驳</span>
                </div>
                <div></div>
            </li>
            <li class="point">
                <span class="point"></span>
                <span class="text">仙桃</span>
            </li>
            <li class="line dashed">
                <div>
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#iconhuoche"></use>
                    </svg>
                    <span>拖</span>
                </div>
                <div></div>
            </li>
            <li class="point">
                <span class="point"></span>
                <span class="text">虎门</span>
            </li>
            <li class="point area">
            <div>
            <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconditu"></use>
            </svg>
            </div>
            <span class="text">仙桃市区</span>
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript" src="../scripts/vendor/jquery-3.4.1/jquery-3.4.1.js"></script>
<script type="text/javascript" src="../scripts/plugins/time_shaft/iconfont.js"></script>

</body>
</html>